<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random</title>.
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            display: flex;
            margin: auto;
            width: 80%;
            flex-direction: column;
            align-items: center;
        }

        .head {
            display: flex;
            flex-shrink: 0;
        }
    </style>
    <script>
        var images = new Array(3);
        images[0] = "../img/1.jpg"
        images[1] = "../img/2.jpg"
        images[2] = "../img/3.jpg"
        var names = new Array(3);
        names[0] = "张三"
        names[1] = "李四"
        names[2] = "王五"

        function RandomFunction() {
            var randomNumber = Math.floor(Math.random() * images.length);
            var image = document.createElement("img")
            image.src = images[randomNumber];
            image.width = 100
            image.title = names[randomNumber]
            document.body.appendChild(image)
        }
    </script>
</head>
<body>
    <h1>Random Slector</h1>
    <div class="head">
        <img src="../img/1.jpg" alt="" width="100" title="张三">
        <img src="../img/2.jpg" alt="" width="100" title="李四">
        <img src="../img/3.jpg" alt="" width="100" title="王五">
    </div>
    <button id="Random" onclick="RandomFunction()">
    随机抽取
    </button>
</body>
</html>